<template>
	<view class="register" @click="selectIsXiala">
		<!-- 密码 -->
	    <view class="inventory">
			<view class="inputTittle">密码:</view>
			<input type="password"  placeholder="必填" v-model="inputText.password" class="inputt" placeholder-class="inputt">
	    </view>
		<!-- 店铺名称 -->
		<view class="code">
			<view class="inputTittle">店铺名称:</view>
			<input type="text" placeholder="必填" v-model="inputText.storeName"  class="inputt" placeholder-class="inputt">
		</view>
		<!-- 店铺负责人 -->
		<view class="number">
			<view class="inputTittle">店铺负责人:</view>
			<input type="text" placeholder="必填" v-model="inputText.storeBoss" class="inputt" placeholder-class="inputt">
		</view>
		<!-- 店铺负责人身份证号 -->
		<view class="serial">
			<view class="inputTittle">负责人身份证号:</view>
			<input type="text" placeholder="必填" v-model="inputText.storeBossIdcardNo" class="inputt" placeholder-class="inputt">
		</view>
		<!-- 店铺负责人手机号 -->
		<view class="quantity">
			<view class="inputTittle">负责人手机号:</view>
			<input type="text" placeholder="必填" v-model="inputText.storeBossMobile" class="inputt" placeholder-class="inputt">
		</view>
		<!-- 营业执照号码 -->
		<view class="date">
			<view class="inputTittle">营业执照号码:</view>
			<input type="text" placeholder="必填" v-model="inputText.storeBussinessLicensesNo" class="inputt" placeholder-class="inputt">
		</view>
	<!-- 	<view class="producer">
			<view class="inputTittle">店铺所在城市:</view>
			<input type="text" placeholder="(必填)" v-model="inputText.city" class="inputt" placeholder-class="inputt">
		</view>
		<view class="producer">
			<view class="inputTittle">店铺所在区:</view>
			<input type="text" placeholder="(必填)" v-model="inputText.area" class="inputt" placeholder-class="inputt">
		</view> -->
		<!-- 配送类型 -->
		<view class="content">
			<view class="xuanze" @click.stop="selectIsXiala0">
				<text>配送类型</text>
				<input type="text" placeholder="选择" class="inputt" v-model="productType" placeholder-class="inputt1" style="text-align: center;">
				<view class="xiala" v-if="isXiala0==1">
					<view class="xiala-xuan" :class="[isXiala0==1?'open':isXiala0==2?'close':'']">
						<view class="xiala-hang" v-for="(item,index) in option" :key="index" @click="xuanzeMoban(item.id,item.devliverType)">
							<text>{{item.devliverType}}</text>
						</view>					
					</view>
				</view>
			</view>
		</view>
		<view class="producer">
			<view class="inputTittle">店铺地址:</view>
			<input type="text" placeholder="选择" @click="chooseAddress()" class="inputt" placeholder-class="inputt">
			<view class="text">{{inputText.storeAddress}}</view>
		</view>
		<!-- 店铺类型 -->
		<view class="name">
			<view class="inputTittle">店铺类型:</view>
			<input type="text" placeholder="非必填" v-model="inputText.storeType" class="inputt" placeholder-class="inputt">
		</view>
		<!-- 图片上传 -->
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" :data-url="imgList[index]">
					店铺负责人身份证正面:
					<image :src=item  mode="aspectFill" style="width: 50px;height: 50px;margin-left: 50rpx;"  @tap.stop="delImg" ></image>
					<view class="cu-tag bg-red"  @tap.stop="delImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="chooseImage" v-if="imgList.length < count">
					<text class='cuIcon-cameraadd'>店铺负责人身份证正面，点击上传图片</text>
				</view>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList2" :key="index" :data-url="imgList2[index]">
					店铺负责人身份证反面:
					<image :src=item  mode="aspectFill" style="width: 50px;height: 50px;margin-left: 50rpx;"  @tap.stop="delImg" ></image>
					<view class="cu-tag bg-red"  @tap.stop="delImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="chooseImage2" v-if="imgList2.length < count">
					<text class='cuIcon-cameraadd'>店铺负责人身份证反面，点击上传图片</text>
				</view>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList3" :key="index" :data-url="imgList3[index]">
					店铺执照图片地址主证:
					<image :src=item  mode="aspectFill" style="width: 50px;height: 50px;margin-left: 50rpx;"  @tap.stop="delImg" ></image>
					<view class="cu-tag bg-red"  @tap.stop="delImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="chooseImage3" v-if="imgList3.length < count">
					<text class='cuIcon-cameraadd'>店铺执照图片地址主证，点击上传图片</text>
				</view>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList4" :key="index" :data-url="imgList4[index]">
					店铺执照图片地址附证:
					<image :src=item  mode="aspectFill" style="width: 50px;height: 50px;margin-left: 50rpx;"  @tap.stop="delImg" ></image>
					<view class="cu-tag bg-red"  @tap.stop="delImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="chooseImage4" v-if="imgList4.length < count">
					<text class='cuIcon-cameraadd'>店铺执照图片地址附证，点击上传图片</text>
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="button">
			<view class="grounding" @click="submitto">
				<p>立即注册</p>
			</view>
		</view>
	</view>
</view>
</template>
<script>
	import { queryAllr,saveStore } from '@/api/new.js'
	export default {
		data() {
			return {
				queryAll:[],
				queryAll:[],
				title: 'Hello',
				isXiala0:2,
				option:[],
				title: 'Hello',
				isXiala1:2,
				option1:[],
				title: 'Hello',
				isXiala2:2,
				option2:[],
				productType:"选择",
				inputText:{
					password:'',
					storeName:'',
					storeBoss:'',
					storeBossIdcardNo:'',
					storeBossMobile:'',
					storeBussinessLicensesNo:'',
					city:'',
					area:'',
					storeAddress:'',
					storeType:'',
					supportSend:'',
					latitude:'',
					longitude:'',
					
					storeBossIdcard1:'',
					storeBossIdcard2:'',
					storeBussinessLicenses1:'',
					storeBussinessLicenses2:'',
				},
				//图片总允许上传数目
				count: 1,
				//存储服务器返回的文件名称
				imgList: [],
				imgList2: [],
				imgList3: [],
				imgList4: [],
				//存储选择的本地图片文件路径列表
				tempImgList: [],
				tempImgList2: [],
				tempImgList3: [],
				tempImgList4: [],
				//服务器图片资源获取接口
				baseUrl: 'http://www.yuebi.online/YBSsm2/exFunction/uploadImage.do',				
				
			}
		},
		onLoad() {
			
		},
		methods: {
			submitto(){
				var data = this.inputText
				data.storeBossIdcard1 = this.imgList[0]
				data.storeBossIdcard2 = this.imgList2[0]
				data.storeBussinessLicenses1 = this.imgList3[0]
				data.storeBussinessLicenses2 = this.imgList4[0]
				saveStore(data).then(res => {
					if(res.data.code != 200){
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						return;
					}
					uni.navigateBack({
						delta: 1
					})
				})
			},
			chooseAddress() {
				var that = this
				wx.getLocation({
				    // wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标
				    type: 'gcj02',
				    //获取位置成功
				    success: function (res) {
						wx.chooseLocation({
						    success: function (res) {
						        // console.log(res); 
								that.inputText.storeAddress = res.address
								that.inputText.latitude = res.latitude
								that.inputText.longitude = res.longitude
						    },
						    fail: function () {
						    },
						    complete: function () {
						    }
						  })
				      },
				      //获取位置失败
				      fail: function (err) {
				        console.log("获取位置信息失败，请返回重试")
				      },
				      //接口调用结束的回调函数（调用成功、失败都会执行）
				      complete: function (info) {
				        console.log("完成")
				      },
				    })
			},
			selectIsXiala(){
				this.isXiala0=2
				this.isXiala1=2
				this.isXiala2=2
			},
			selectIsXiala0(){
				if(this.isXiala0==1){
					this.isXiala0=2
				}else if(this.isXiala0==2){
					this.isXiala0=1
				}
			},
			xuanzeMoban(label,value){
				this.inputText.supportSend = label
				this.productType = value
			},
			
			//上传图片到服务器
			uploadImg(){
				uni.uploadFile({
					url: 'https://www.yuebi.online/exFunction/uploadImgFile', //真实的接口地址
					//每次保存最新的图片到服务器
					filePath: this.tempImgList[0],
					name: 'file',
					// header: {
					// 	'content-type': 'multipart/form-data',
					// 	'X-Access-Token': uni.getStorageSync('Access-Token')
					// },
					success: (uploadFileRes) => {
						let ress = JSON.parse(uploadFileRes.data)
						//将服务器返回的文件名进行存储，存储到记录对象中，使能从服务器获取图片资源
						this.imgList.push(ress.fileUrl);
					}
				});
			},
			//选择图片上传
			chooseImage() {
				uni.chooseImage({
					count: 1, //单词最多允许选中，默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// 获取到图片的本地文件路径列表，存储到临时列表tempImgList中
						if (this.tempImgList.length != 0) {
							this.tempImgList = this.tempImgList.concat(res.tempFilePaths)
						} else {
							this.tempImgList = res.tempFilePaths
						}
						
						let index = this.tempImgList[0].indexOf("blob:")
						let result = this.tempImgList[0].substr(index + 1,this.tempImgList[0].length)
						this.uploadImg()
					}
				});
			},
			/**
			 * 预览图片 urls所有的url地址，current选中的url地址
			 * @param {Object} e 
			 */
			viewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			/**
			 * 删除图片
			 * @param {Object} e
			 */
			delImg(e) {
				uni.showModal({
					title: '',
					content: '确定删除此图片吗？',
					cancelText: '再看看',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			//上传图片到服务器
			uploadImg2(){
				uni.uploadFile({
					url: 'https://www.yuebi.online/exFunction/uploadImgFile', //真实的接口地址
					filePath: this.tempImgList2[0],
					name: 'file',
					success: (uploadFileRes) => {
						let ress = JSON.parse(uploadFileRes.data)
						this.imgList2.push(ress.fileUrl);
					}
				});
			},
			//选择图片上传
			chooseImage2() {
				uni.chooseImage({
					count: 1, //单词最多允许选中，默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.tempImgList2.length != 0) {
							this.tempImgList2 = this.tempImgList2.concat(res.tempFilePaths)
						} else {
							this.tempImgList2 = res.tempFilePaths
						}
						
						let index = this.tempImgList2[0].indexOf("blob:")
						let result = this.tempImgList2[0].substr(index + 1,this.tempImgList2[0].length)
						this.uploadImg2()
					}
				});
			},
			//上传图片到服务器
			uploadImg3(){
				uni.uploadFile({
					url: 'https://www.yuebi.online/exFunction/uploadImgFile', //真实的接口地址
					filePath: this.tempImgList3[0],
					name: 'file',
					success: (uploadFileRes) => {
						let ress = JSON.parse(uploadFileRes.data)
						this.imgList3.push(ress.fileUrl);
					}
				});
			},
			//选择图片上传
			chooseImage3() {
				uni.chooseImage({
					count: 1, //单词最多允许选中，默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.tempImgList3.length != 0) {
							this.tempImgList3 = this.tempImgList3.concat(res.tempFilePaths)
						} else {
							this.tempImgList3 = res.tempFilePaths
						}
						
						let index = this.tempImgList3[0].indexOf("blob:")
						let result = this.tempImgList3[0].substr(index + 1,this.tempImgList3[0].length)
						this.uploadImg3()
					}
				});
			},
			//上传图片到服务器
			uploadImg4(){
				uni.uploadFile({
					url: 'https://www.yuebi.online/exFunction/uploadImgFile', //真实的接口地址
					filePath: this.tempImgList4[0],
					name: 'file',
					success: (uploadFileRes) => {
						let ress = JSON.parse(uploadFileRes.data)
						this.imgList4.push(ress.fileUrl);
					}
				});
			},
			//选择图片上传
			chooseImage4() {
				uni.chooseImage({
					count: 1, //单词最多允许选中，默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.tempImgList4.length != 0) {
							this.tempImgList4 = this.tempImgList4.concat(res.tempFilePaths)
						} else {
							this.tempImgList4 = res.tempFilePaths
						}
						
						let index = this.tempImgList4[0].indexOf("blob:")
						let result = this.tempImgList4[0].substr(index + 1,this.tempImgList4[0].length)
						this.uploadImg4()
					}
				});
			},
		},
		mounted () {
			let data = {}
			queryAllr(data).then(res => {
				this.option = res.data.data
			})
		},
	}

</script>

<style scoped>
	/* 生产公司样式 */
.register{
	background: #fff;
}
.inputt{
	float: left;
	color: #353535;
	line-height: 40px;
	height: 40px;
	text-align: right;
	margin-left: 10px;
	padding-right: 10px;
}
.inputt1{
	float: left;
	color: #353535;
	line-height: 40px;
	height: 40px;
	text-align: right;
	margin-left: 10px;
	padding-right: 10px;
	margin-left: -36px;
}
.inputt2{
	float: left;
	color: #353535;
	line-height: 40px;
	height: 40px;
	text-align: right;
	margin-left: 10px;
	padding-right: 10px;
	margin-left: -28px;
}
.inputt3{
	float: left;
	color: #353535;
	line-height: 40px;
	height: 40px;
	text-align: center;
	margin-left: 10px;
	padding-right: 10px;
	margin-left: -28px;
}
.inputTittle{
	float: left;
	font-size: 16px;
	margin: 0;
	height: 40px;
	width: 32%;
	line-height: 40px;	
	padding-left: 10px;
}
.cu-form-group {
		min-width: calc(4em + 15px);
		border-top: 20rpx solid #fff;
		background: #F4F8FE;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 20rpx;
	}
.register .inventory{
	background: #F4F8FE;
	width: 100%;
	height: 40px;
}

/* 产品分类样式 */
.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		background: #F4F8FE;
	}
.xuanze{
		
		width: 100%;
		height: 80rpx;
		border-radius: 20rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.xuanze text{
		color: #000;
 
	}
	.xiala{
		position: absolute;
		bottom: -240rpx;
		left: 0;
		height: 230rpx;
		width: 100%;
		z-index: 11;
	}
	.xiala-xuan{
		height: 230rpx;
		background: #F4F8FE;
		box-sizing: border-box;
		overflow: hidden;
	}
	.xiala-hang{
		height: 50rpx;
		width: 100%;
		border-bottom: 1px solid #353535;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.xiala-hang:last-child{
		border: 0px;
	}
	    /* 显示或关闭动画*/
	    .open {
	        animation: slideContentUp 0.3s linear both;
	    }
	 
	    .close {
	        animation: slideContentDown 0.3s linear both;
	    }
	 
	    /* 动态设置高度 */
	    @keyframes slideContentUp {
	        from {
	            height: 0;
	        }
	 
	        to {
	            height: -230rpx;
	        }
	    }
	 
	    @keyframes slideContentDown {
	        from {
	            height: -230rpx;
	        }
	 
	        to {
	            height: 0;
	        }
	    }


/* 产品编码 */
.code {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}
/* 产品名称 */
.name {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}

/* 批次号 */
.number {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}

/* 序列号 */
.serial {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}

/* 库存数 */
.quantity {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}
/* unit单位 */
.content1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		background: #F4F8FE;
	}
.xuanze1{
		
		width: 100%;
		height: 80rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.xuanze1 text{
	color: #000;
 
	}
	.xiala1{
		position: absolute;
		bottom: -240rpx;
		left: 0;
		height: 230rpx;
		width: 100%;
		z-index: 92;
	}
	.xiala-xuan1{
		/* height: 230rpx; */
		width: 100%;
		background: #F4F8FE;
		box-sizing: border-box;
	}
	.xiala-hang1{
		height: 50rpx;
		width: 100%;
		border-bottom: 1rpx solid #e3e3e3;
		display: flex;
		z-index: 22;
		align-items: center;
		justify-content: center;
	}
	.xiala-hang1:last-child{
		border: 0px;
	}
	 

/* 厂商 */
.manufacturer {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}

/* 产品类型 */
.content2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		background: #F4F8FE;
	}
.xuanze2{
		width: 100%;
		height: 80rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.xuanze2 text{
		color: #000;
 
	}
	.xiala2{
		position: absolute;
		bottom: -240rpx;
		left: 0;
		/* height: 230rpx; */
		width: 100%;
		z-index: 3;
	}
	.xiala-xuan2{
		/* height: 230rpx; */
		width: 100%;
		background: #F4F8FE;
		box-sizing: border-box;
		overflow: hidden;
	}
	.xiala-hang2{
		height: 50rpx;
		width: 100%;
		border-bottom: 1rpx solid #e3e3e3;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.xiala-hang2:last-child{
		border: 0px;
	}

/* 产品产地 */
.producer {
	background: #F4F8FE;
	width: 100%;
	height: 100px;
	margin-top: 10px;
}
.producer .text{
	float: right;
	width: 600rpx !important;
}
/* 产品生产日期 */
.date {
	background: #F4F8FE;
	width: 100%;
	height: 40px;
	margin-top: 10px;
}
/* 提交按钮 */
.button{
	width: 100%;
	height: 40px;
	background: #F4F8FE;
	position: absolute;
	width: 100%;
	/* bottom: -65px; */
	height: 55px;
}
.grounding{
	width: 150px;
	height: 40px;
	background: #4268e5;
	line-height: 40px;
	margin-top: 6px;
	margin-left: 28%;
	color: #fff;
	border-radius: 15rpx;
}
.grounding{
	text-align: center;
}

.cuIcon-cameraadd[data-v-5b522133] {
    color: #EEE5DE;
    margin-left: 32%;
    font-size: 22px;
}
.action{
	color: #EEE5DE;
	margin-left: 40%;
	font-size: 22px;
}
.uni-image {
    width: 100px;
    height: 100px;
    display: inline-block;
    overflow: hidden;
    position: relative;
}
</style>
